<template>
  <div
    class="imgItem"
    @dragstart="dragStartHandler"
    @dragover.prevent="dragOverHandler"
    @dragenter="dragEnterHandler"
    @dragend="dragEndHandler"
  >
    <img class="bgImg" :src="picSrc" alt="" />
    <em class="removeImg">
      <img
        src="@/assets/images/imgClose.png"
        class="imgClose"
        @click="removeImg"
    /></em>
  </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
      required: true,
    },
    picSrc: {
      type: String,
      required: true,
    },
  },
  methods: {
    dragStartHandler() {
      // 设置当前正在被拖动的图片
      this.$emit("setCurDragImg", this.index);
    },
    dragEndHandler(e) {
      this.$emit("clearCurDragImg");
    },
    dragOverHandler(e) {
      // 在dragEnter中针对放置目标来设置
      e.dataTransfer.dropEffect = "move";
    },
    dragEnterHandler(e) {
      console.log("e", e);
      //e.dataTransfer.effectAllowed = "move";
      this.$emit("dragImg", this.index);
    },
    removeImg() {
      this.$emit("removeImg");
    },
  },
};
</script>
<style scoped lang="scss">
.imgItem {
  position: relative;
  height: 150px;
  width: 150px;
  display: inline-block;
  border-radius: 5px;
  float: left;
  margin: 0 15px 15px 0;
  .bgImg {
    height: 150px;
    width: 150px;
    object-fit: cover;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
  }
  .imgClose {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    margin-top: -13px;
    margin-right: -13px;
    cursor: pointer;
  }
}
</style>
